<script setup>
import {QuillEditor} from "@vueup/vue-quill";
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import '@vueup/vue-quill/dist/vue-quill.snow.css'

// 编辑器内容
const content = ref('')


// 编辑器配置
const editorOptions = {
  theme: 'snow',
  modules: {
    toolbar: [
      ['bold', 'italic', 'underline', 'strike'],
      ['blockquote', 'code-block'],
      [{ 'header': 1 }, { 'header': 2 }],
      [{ 'list': 'ordered'}, { 'list': 'bullet' }],
      [{ 'color': [] }, { 'background': [] }],
      ['link', 'image'],
      ['clean']
    ]
  },
}

const STORAGE_KEY = 'user-agreement-content'

const loadContent = () => {
  const savedContent = localStorage.getItem(STORAGE_KEY)
  if (savedContent) {
    content.value = savedContent
  }
}

// 保存内容到本地存储
const saveContent = () => {
  if (!content.value || content.value === '<p><br></p>') {
    ElMessage.warning('内容不能为空')
    return
  }

  localStorage.setItem('user-agreement-content', content.value)
  ElMessage.success('保存成功')
}

// 重置内容
const resetContent = () => {
  content.value = '<p>请输入关于我们的内容...</p>'
  ElMessage.info('已重置内容')
}



// 初始化时加载保存的内容
onMounted(() => {
  loadContent()
})

</script>

<template>
  <el-breadcrumb style="margin: 0 0 20px 0" separator="/">
    <el-breadcrumb-item :to="{ path: '/system/notice'}">系统内容管理</el-breadcrumb-item>
    <el-breadcrumb-item>
      <a href="#">用户协议</a>
    </el-breadcrumb-item>
  </el-breadcrumb>
  <div class="text"><strong>用户协议</strong></div>
  <div class="editor-container" style="margin-top: 30px">
    <quill-editor
        style="height: 300px"
        v-model:content="content"
        contentType="html"
        :options="editorOptions"
    />
  </div>
  <el-form-item style="margin-top: 20px">
    <el-button @click="resetContent">重置</el-button>
    <el-button type="primary" @click="saveContent">保存</el-button>
  </el-form-item>
</template>

<style scoped>
.text{
  font-size: 18px;
}

.editor-container {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

/* 调整工具栏样式 */
:deep(.ql-toolbar) {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom: 1px solid #dcdfe6;
}

:deep(.ql-container) {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  min-height: 50px;
}
</style>